<template>
  <div class="product">

    <!-- 数据展示部分 -->
    <div>
      <div class="product-top-img">
        <img src="@/assets/product/product-top.png" alt/>
      </div>
      <div class="product-top-data">
        <el-row>
          <el-col :span="16" :offset="4">

            <div class="product-top-data-box">
              <el-row>
                <el-col :span="9">
                  <div
                    v-for="(datas,index) in products"
                    :key="index">
                    <div class="product-top-data-box-child">
                      <div class="product-top-data-box-child-title">
                        <img src="@/assets/product/product-source.png" alt="货源图片"/>
                        <span>总承运重量/吨</span>
                      </div>
                      <p>{{datas.carryingWeight}}</p>
                      <!--<p>{{datas.carryingWeight}}</p>-->
                    </div>
                  </div>

                </el-col>
                <el-col :span="8">
                  <div
                    v-for="(datas2,index) in orders"
                    :key="index">
                    <div class="product-top-data-box-child">
                      <div class="product-top-data-box-child-title">
                        <img src="@/assets/product/product-order.png" alt="订单图片"/>
                        <span>总发布订单数据</span>
                      </div>
                      <p>{{datas2.issueOrder}}</p>
                      <div class="div-line"></div>
                    </div>
                  </div>

                </el-col>
                <el-col :span="7">
                  <div
                    v-for="(datas3,index) in trucks"
                    :key="index">
                    <div class="product-top-data-box-child">
                      <div class="product-top-data-box-child-title">
                        <img src="@/assets/product/product-car.png" alt="订单图片"/>
                        <span>总拥有货车/辆</span>
                      </div>
                      <p>{{datas3.owningTruck}}</p>
                      <div class="div-line"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- <p>我们的<span>数据</span><span>一周更新</span>一次</p>  -->

          </el-col>
        </el-row>
      </div>
    </div>
    <!-- web端展示部分 -->
    <div class="product-web" id="product-web">
      <div class="product-web-content">
        <div class="product-web-box">
          <p>One+Two</p>
          <p>我们的1+2</p>
        </div>
        <div style="display:flex">
          <div class="product-web-box-left">
            <div class="product-web-box-left-title">
              <div></div>
              <p style="font-size:2rem;line-height:2.8rem;">企业版智能管理Web系统平台</p>
            </div>
            <div class="product-web-box-left-text">
              <p>全国司机动态汇集智能管理</p>
              <p style="letter-spacing:0.69px;margin-top:1rem">针对企业推出的PC客户端，服务涵盖:订单管理，发</p>
              <p style="letter-spacing:0.4px;">布货源、发布车源、经销商管理、车队管理、财务管理等。</p>
              <p>通过该平台，可以实现对全国所有省会城市、地级城</p>
              <p>市平台注册司机会员的空车位置、车主信息、车辆信</p>
              <p>息、联系方式等信息的显示，以及企业运输订单、财</p>
              <p>务、经销商的集中智能管理，做好了物流信息大数据</p>
              <p>的汇集工作。</p>
            </div>
          </div>

          <div ref="productWebBoxTop">
            <div class="product-web-box-right">
              <img src="@/assets/product/product-ReleaseSource.png" alt="发布货源"/>
              <img src="@/assets/product/product-flowManagement.png" alt="流向管理"/>
              <img src="@/assets/product/product-projectManagement.png" alt="项目管理"/>
              <img src="@/assets/product/product-waybillManagement.png" alt="运单管理"/>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>

    <!-- 货主端App -->
    <div class="product-shipper" id="product-shipper">
      <el-row>
        <el-col :span="12" :offset="12">
          <!-- ref -->
          <div ref="product-shipper-left">
            <div class="product-shipper-content">
              <el-col :span="20" :offset="4">
                <div ref="product-shipper-right">
                  <div class="product-shipper-content-right">
                    <div style="display:flex;algin-item:center;margin-top:12rem;color:#333">
                      <div
                        style="width:2rem;height:0.7rem;background-color:#333;border-radius:8px;position: absolute;top: 20.5%;left:55%"
                      ></div>
                      <p
                        style="line-height:4.375rem;vertical-align:middle;font-size:2rem;font-weight:600;"
                      >“哆啦快运”APP</p>
                      <img
                        src="@/assets/product/product-shipper-text.png"
                        alt="货主端app文字图片"
                        style="width:9rem;height:4.375rem;"
                      />
                    </div>
                    <div style="color:#333;margin-top:7rem">
                      <p style="font-size:3rem;font-weight:bold;line-height:4.19rem;">一键搜寻司机</p>
                      <p style="font-size:3rem;font-weight:bold;line-height:4.19rem;">让货物轻松上路</p>
                      <p style="margin-top:1.3rem;line-height:1.375rem;">针对企业货主移动端推出的“运单管理APP端”。</p>
                      <p
                        style="width:23rem;line-height:1.375rem;"
                      >服务涵盖：发布订单、运能管理、支付结算、财务管理、交货确认、车辆定位、库存盘点、金融授信等。</p>
                      <div ref="productShipperCode" style="width:10.625rem;margin-top:2rem ">
                        <div style="width:10.625rem;margin-top:2rem ">
                          <img
                            src="@/assets/product/product-shipper-code.png"
                            alt="货主端app二维码"
                            style="width:10.625rem;height:10.625rem;"
                          />
                        </div>
                      </div>
                      <p style="text-align:center;width:10.625rem;margin-top:0.5rem">安卓货主端</p>
                      <p
                        style="color:#F17C70;margin-top:1.1rem"
                      >（ 注：IOS请直接在APP STORE搜索“哆啦快运”货主端进行下载 ）</p>
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 司机端App -->
    <div class="product-driver" id="product-driver">
      <div class="product-driver-left">
        <el-row>
          <el-col :span="24">
            <div class="product-shipper-content">
              <el-col :span="24" :offset="10">
                <div class="product-shipper-content-right">
                  <div style="display:flex;algin-item:center;margin-top:7.5rem;color:#333">
                    <div
                      style="width:2rem;height:0.7rem;background-color:#333;border-radius:8px;position: absolute;top: 14.7%;left:36%"
                    ></div>
                    <p
                      style="line-height:4.375rem;vertical-align:middle;font-size:2rem;font-weight:600;"
                    >“哆啦快运”APP</p>
                    <img
                      src="@/assets/product/product-driver-text.png"
                      alt="货主端app文字图片"
                      style="width:9rem;height:4.375rem;"
                    />
                  </div>
                  <div style="color:#333;margin-top:7rem">
                    <p style="font-size:3rem;font-weight:bold;line-height:4.19rem;">司机一键接单</p>
                    <p style="font-size:3rem;font-weight:bold;line-height:4.19rem;">丰富货源让您多拉快运</p>
                    <p style="width:23rem;line-height:1.375rem;margin-top:1.3rem;">
                      针对司机端推出的“司机端接单抢单APP”。
                      <br/>服务涵盖：查找货源、发布空车、保险、新车团购、钱包金融、维修救援、汽配购买、代收回单等。
                    </p>
                    <div ref="productDriverCode" style="width:10.625rem;margin-top:2rem ">
                      <div style="width:10.625rem;margin-top:2rem ">
                        <img
                          src="@/assets/product/product-driver-code.png"
                          alt="货主端app二维码"
                          style="width:10.625rem;height:10.625rem;"
                        />
                      </div>
                    </div>
                    <p style="text-align:center;width:10.625rem;margin-top:0.5rem">安卓司机端</p>
                    <p style="color:#F17C70;margin-top:1.1rem">（ 注：IOS请直接在APP STORE搜索“哆啦快运”司机端进行下载 ）</p>
                  </div>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="product-driver-right"></div>
    </div>
    <!-- 底部的图 -->
    <div class="product-bottom"></div>
    <!-- 返回顶部 -->
    <img
      v-if="this.flag"
      class="return"
      src="@/assets/renturn-top.png"
      alt="回到顶部"
      @click="returnTop"
    />
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "product",
    data() {
      return {
        flag: false,
        //定义后端传入数据的相应字段并进行初始化
        products: [
          {
            carryingWeight: ""
          }
        ],
        orders: [
          {
            issueOrder: ""
          }
        ],
        trucks: [
          {
            owningTruck: ""
          }
        ],
      };
    },

    mounted() {
      window.addEventListener("scroll", this.handleScroll);
      // console.log(this);
      console.log(this.products);
      console.log(this.orders);
      console.log(this.trucks);
      // console.log('加载中')
      this.getWeight()
      this.getOrder()
      this.getTruck()
    },
    methods: {
      //通过get方法从后端的数据接口获取数据（这里是获取产品页面的车辆载重数据）
      getWeight() {
        //=>表示可以渲染模板数据
        axios.get('api/vue/getCarryingWeight').then((res) => {
          console.log(res); //请求正确时执行的代码
          this.products = res.data;
          console.log(this.products)
        }).catch(function (response) {
          console.log(response); //发生错误时执行的代码
        });
      },

      //这里是获取产品页面的订单数据的方法
      getOrder() {
        //=>表示可以渲染模板数据
        axios.get('api/vue/getIssueOrder').then((res) => {
          console.log(res); //请求正确时执行的代码
          this.orders = res.data;
          console.log(this.orders)
        }).catch(function (response) {
          console.log(response); //发生错误时执行的代码
        });
      },

      //这里是获取产品页面的车辆数据的方法
      getTruck() {
        //=>表示可以渲染模板数据
        axios.get('api/vue/getOwningTruck').then((res) => {
          console.log(res); //请求正确时执行的代码
          this.trucks = res.data;
          console.log(this.trucks)
        }).catch(function (response) {
          console.log(response); //发生错误时执行的代码
        });
      },
      handleScroll() {
        var scrollTop =
          window.pageXOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (scrollTop >= 400 && scrollTop < 1100) {
          this.flag = false;
          this.$refs.productWebBoxTop.classList.add(
            "product-web-box-top-animation"
          );
          this.$refs.productShipperCode.classList.remove(
            "product-shipper-right-animation"
          );
          this.$refs.productDriverCode.classList.remove(
            "product-web-box-left-animation"
          );
        } else if (scrollTop >= 800 && scrollTop < 1200) {
          this.flag = false;
          this.$refs.productWebBoxTop.classList.remove(
            "product-web-box-top-animation"
          );
          this.$refs.productShipperCode.classList.remove(
            "product-shipper-right-animation"
          );
          this.$refs.productDriverCode.classList.remove(
            "product-web-box-left-animation"
          );
        } else if (scrollTop >= 1900 && scrollTop < 2400) {
          this.flag = true;
          this.$refs.productWebBoxTop.classList.remove(
            "product-web-box-top-animation"
          );
          this.$refs.productShipperCode.classList.add(
            "product-shipper-right-animation"
          );
          this.$refs.productDriverCode.classList.remove(
            "product-web-box-left-animation"
          );
        } else if (scrollTop >= 2400) {
          this.flag = true;
          this.$refs.productWebBoxTop.classList.remove(
            "product-web-box-top-animation"
          );
          this.$refs.productShipperCode.classList.remove(
            "product-shipper-right-animation"
          );
          this.$refs.productDriverCode.classList.add(
            "product-web-box-left-animation"
          );
        } else {
          this.flag = false;
          this.$refs.productWebBoxTop.classList.remove(
            "product-web-box-top-animation"
          );
          this.$refs.productShipperCode.classList.remove(
            "product-shipper-right-animation"
          );
          this.$refs.productDriverCode.classList.remove(
            "product-web-box-left-animation"
          );
        }
      },
      returnTop: function () {
        document.querySelector("#header").scrollIntoView(true);
      }

    },

    destroyed() {
      window.removeEventListener("scroll", this.handleScroll); //监听页面滚动事件
    }
  };
</script>
<style scoped>
  p {
    margin-block-start: 0em;
    margin-block-end: 0em;
  }

  .product-top-img,
  .product-top-img img {
    width: 100%;
    height: 42.25rem;
  }

  .product-top-img {
    margin-top: 3.75rem;
  }

  /* .product-top-img {
      margin-top: 1px;
  } */
  .product-top-data {
    width: 100%;
    height: 16rem;
    background-color: #fff;
    margin-top: 20px;
  }

  .product-top-data-box {
    height: 18.4rem;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
  }

  .product-top-data-box-child {
    height: 10.5rem;
  }

  .product-top-data-box p {
    font-size: 1.6rem;
    text-align: center;
    margin-top: 2.25rem;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .product-top-data-box span {
    color: #3eadff;
  }

  .product-top-data-box-child > p {
    text-align: center;
    color: #3eadff;
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 5.625rem;
    margin-top: -0.5rem;
  }

  .product-top-data-box-child-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.75rem;
  }

  .product-top-data-box-child-title img {
    width: 2.375rem;
    height: 1.875rem;
    margin-right: 0.5rem;
  }

  .product-top-data-box-child-title span {
    color: #8a8a8a;
    font-size: 1.1875rem;
  }

  .div-line {
    position: relative;
    top: -70%;
    right: 2px;
    border-right: 1px solid #ccc;
    width: 3px;
    height: 6.9rem;
  }

  /* product-web start */
  .product-web {
    height: 62.76rem;
    background-image: url("../assets/product/product-bg.png");
    background-size: 100% 100%;
  }

  .product-web-content {
    width: 100%;
    height: 62.76rem;
  }

  .product-web-box {
    width: 100%;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .product-web-box p:nth-of-type(1) {
    font-size: 3.25rem;
    line-height: 4.5rem;
    color: #ececec;
    font-weight: 600;
    opacity: 0.1;
  }

  .product-web-box p:nth-of-type(2) {
    font-size: 2rem;
    line-height: 2.8rem;
    color: #fff;
    font-weight: 600;
    position: relative;
    top: -24%;
  }

  /* web left */
  .product-web-box-left {
    width: 60%;
    height: 38.9rem;
    color: #fff;
  }

  .product-web-box-left-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 9.5rem;
  }

  .product-web-box-left-title > div {
    width: 2rem;
    height: 0.7rem;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    top: 0;
    left: -1.31rem;
  }

  .product-web-box-left-text p:nth-of-type(1) {
    font-size: 3rem;
    line-height: 4.2rem;
    width: 24rem;
    margin: 0 auto;
    padding-top: 8rem;
  }

  .product-web-box-left-text p:nth-of-type(2),
  .product-web-box-left-text p:nth-of-type(3),
  .product-web-box-left-text p:nth-of-type(4),
  .product-web-box-left-text p:nth-of-type(5),
  .product-web-box-left-text p:nth-of-type(6),
  .product-web-box-left-text p:nth-of-type(7),
  .product-web-box-left-text p:nth-of-type(8) {
    width: 24rem;
    margin: 0 auto;
    line-height: 1.4rem;
    /* padding-top:0.8rem; */
    letter-spacing: 0.3px;
  }

  /* .product-web-box-left-text p:nth-of-type(3){
      width:24rem;
      margin:0 auto;
      letter-spacing:0.3px;
  } */
  /* web right */
  .product-web-box-right {
    width: 50rem;
    height: 35.9rem;
    position: relative;
    left: -13.5rem;
    background-image: url("../assets/product/product-computer.png");
    background-size: 100% 100%;
    margin-top: 9rem;
  }

  .product-web-box-right img {
    width: 10.5rem;
    height: 4.3rem;
  }

  .product-web-box-right img:nth-of-type(1) {
    position: absolute;
    top: -6rem;
    left: 9.5rem;
  }

  .product-web-box-right img:nth-of-type(2) {
    position: absolute;
    top: 4rem;
    right: 0rem;
  }

  .product-web-box-right img:nth-of-type(3) {
    position: absolute;
    left: 0.5rem;
    top: 14.5rem;
  }

  .product-web-box-right img:nth-of-type(4) {
    position: absolute;
    right: -1.6rem;
    top: 19rem;
  }

  /* product-web end */
  /* 货主端 start */
  .product-shipper {
    width: 99.9%;
    height: 68.3rem;
    background-image: url("../assets/product/product-shipperApp.png");
    background-size: 100% 100%;
  }

  .product-shipper-content {
    height: 55.3rem;
    margin-left: -0.5rem;
  }

  .product-shipper-content-right {
    height: 55.3rem;
  }

  /* 货主端 end */

  /* 司机端 start */
  .product-driver {
    width: 100%;
    height: 72.7rem;
    display: flex;
  }

  .product-driver-left {
    width: 57%;
    height: 72.7rem;
  }

  .product-driver-right {
    width: 43%;
    height: 60rem;
    background-image: url("../assets/product/product-driver.png");
    background-size: 100% 100%;
  }

  /* 司机端 end */
  /* 底部的图 */
  .product-bottom {
    width: 100%;
    height: 14.6rem;
    background-image: url("../assets/product/product-bottom.png");
    background-size: 100% 100%;
  }

  /* 返回 */
  .return {
    width: 76px;
    height: 76px;
    position: fixed;
    right: 3%;
    bottom: 21%;
    cursor: pointer;
  }

  /* 动画 */
  .product-web-box-left-animation {
    animation: homeAboutUsLeftAnimation 2s linear 0s;
  }

  .product-shipper-right-animation {
    animation: productShipperRighttAnimation 2s linear 0s;
  }

  .product-web-box-top-animation {
    animation: homeAboutUsToptAnimation 2s linear 0s;
  }

  @keyframes homeAboutUsLeftAnimation {
    0% {
      transform: translateX(-20px);
    }
    50% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes homeAboutUsToptAnimation {
    0% {
      transform: translateY(-20px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes productShipperRighttAnimation {
    0% {
      transform: translateX(20px);
    }
    50% {
      transform: translateX(10px);
    }
    100% {
      transform: translateX(0);
    }
  }
</style>


